<div id="roles" class="page-layout carded fullwidth " xmlns="">

    <!-- HEADER -->
    <div class="header accent p-24" fxLayout="column" fxLayoutAlign="center start">
        <breadcrumb></breadcrumb>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <!-- CONTENT CARD -->
        <div class="content-card">
            <mat-list>
                <h3 mat-subheader>roles</h3>
                <mat-list-item *ngFor="let role of roles">
                    <mat-icon mat-list-icon>https</mat-icon>
                    <h4 mat-line>{{role.role_name}}</h4><h6 mat-line>{{role.description}}</h6>
                    <p mat-line> {{role.created_at | dataToLocale}} </p>
                    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
                        <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="editRole(role)">
                            <mat-icon>edit</mat-icon>
                            <span>编辑</span>
                        </button>
                        <button mat-menu-item (click)="newRole()">
                            <mat-icon>add</mat-icon>
                            <span>添加</span>
                        </button>
                        <button mat-menu-item (click)="deleteRole(role)">
                            <mat-icon>delete</mat-icon>
                            <span>删除</span>
                        </button>
                    </mat-menu>
                    <mat-divider></mat-divider>
                </mat-list-item>

            </mat-list>

        </div>
        <!-- / CONTENT CARD -->
    </div>
    <!-- / CENTER -->
</div>
